<template>
   <div class="rolelist">
       <h4>角色管理</h4>
       <div class="container">
           <el-button type="primary"   size="small" 
                   style="margin-bottom:14px;" @click="addRole()">新增角色</el-button>
            <el-table  v-loading="loading" :data="data" border style="width: 100%" ref="multipleTable" stripe>
                 <el-table-column type="index"  width="80" label="序号" align="center"></el-table-column>
                 <el-table-column prop="roleName" label="角色名称" width="240" align="center"></el-table-column>
                 <el-table-column prop="status" label="状态" width="240" align="center"  :formatter="formatter">
                </el-table-column>
                <el-table-column label="操作"  align="center">
                <template slot-scope="scope">
                    <el-button size="mini" type="success" @click="editRole(scope.row.roleName,scope.row.id)">编辑</el-button>
                    <el-button size="mini" type="primary" @click="right_set(scope.row.id)">权限设置</el-button>
                    <el-button size="mini" type="warning" @click="forbidden(scope.row.id,scope.row.isDeleted)">{{scope.row.isDeleted == 0? '禁用' :'启用'}}</el-button>
                    <el-button size="mini" type="danger" @click="handleDelete(scope.row.id)">删除</el-button>
                </template>
                </el-table-column>
            </el-table>
            <!--  v-if="total/pageSize > 2" -->
             <div class="pagination">
                <el-pagination  background  layout="prev, pager, next" :total="total" 
                                style="text-align:left;" @current-change="getPageNum">
                </el-pagination>
           </div>
      </div>
      <!-- 新增角色弹框 -->
      <el-dialog title="新增角色" :visible.sync="dialogFormVisible" width="30%" top="18vh">
            <el-form :model="form" :rules="rules" ref="roleForm">
                <el-form-item label="角色名称" label-width="120px" prop = "roleName">
                   <el-input v-model="form.roleName" auto-complete="on" placeholder="请输入角色名称"></el-input>
                </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button @click="cancelSave('roleForm')">取 消</el-button>
                <el-button type="primary" @click="saveRole('roleForm')">保存</el-button>
            </div>
      </el-dialog>
  </div>  
</template>

<script>
import {addRole,getRoleList,delRole,updateRole,updateStatus} from '@/request/api'
export default {
    data(){
        var checkBlank = (rule, value, callback) => {
            if (/(^\s+)|(\s+$)|\s+/g.test(value)) {
                callback(new Error('请不要输入空格'));
            }else {
                callback()
            } 
        };
        return {
           loading:true,
           data: [],
           form: {
                roleName: '',
           },
           rules:{
             roleName:[
                  { required: true, message: '角色名称不能为空', trigger: 'blur' },
                  { validator: checkBlank, trigger: 'blur' }
             ]  
           },
           title:"",
           dialogFormVisible: false,
           total:0,
           roleId:'',
           pageSize:10,
           pageNum: 1,
        }
    },
    created(){
         this.getRole()
    },
    methods:{
      formatter(row, column){
        return  row.isDeleted == 0 ? '可用' : '禁用'
      },
      addRole(){
          this.dialogFormVisible = true;
          this.form.roleName = ''
          this.title = '新增角色'
      },
      saveRole(formName){
          this.$refs[formName].validate((valid) => {
          if (valid) {
            //   添加 
            if(this.title == '新增角色') {
              addRole({
                   roleName:this.form.roleName
               }).then(res=> {
                   if(res.code == 1){
                       this.$message.success('添加角色成功');
                       this.dialogFormVisible = false;
                       this.$refs[formName].resetFields();
                       this.getRole()
                   }
               })
            }else if(this.title == '修改角色名称') {
                updateRole({
                   id:this.roleId,
                   roleName:this.form.roleName
                }).then(res=> {
                    console.log(res);
                    if(res.code == 1) {
                        this.$message.success('修改角色成功');
                        this.dialogFormVisible = false;
                        this.$refs[formName].resetFields();
                        this.getRole()
                    }
                })
            }
           
            //  编辑 
             
            
            //   
          } else {
                console.log('error submit!!');
                return false;
          }
        })
      },
      cancelSave(formName) {
            this.dialogFormVisible = false;
            this.$refs[formName].resetFields();    
      },
      handleDelete(id){
         this.$confirm("此操作将永久删除, 是否继续?", "提示", {
                confirmButtonText: "确定",
                cancelButtonText: "取消",
                type: "warning"
         }).then(()=>{
             delRole({
                 id:id
             }).then(res=> {
                 console.log(res);
                 if(res.code == 1) {
                    this.$message({
                        type: 'success',
                        message: '删除成功!'
                   });
                   this.getRole();
                 }
             })
         }).catch(()=>{
              this.$message({
                    type: 'info',
                    message: '已取消删除'
              });  
         }) 
      },
      forbidden(id,status){
         let info = status == 0 ?'确认要禁用角色吗':'确认要启用角色吗'
         let msg = status == 0 ?'禁用成功!':'启用成功!'
         let cancelMsg = status == 0 ?'已取消禁用!':'已取消启用!'
          this.$confirm(info, {
                confirmButtonText: "确定",
                cancelButtonText: "取消",
                type: "warning"
         }).then(()=>{
             updateStatus({
                 id:id
             }).then(res=> {
                 console.log(res);
                 if(res.code == 1) {
                      this.$message({
                        type: 'success',
                        message: msg
                     });
                      this.getRole()
                 }
             })
            

         }).catch(()=>{
              this.$message({
                    type: 'info',
                    message: cancelMsg
              });  
         }) 
      },
      editRole(roleName,id){
          this.dialogFormVisible = true;
          this.form.roleName = roleName
          this.title = '修改角色名称'
          this.roleId = id;
      },
      right_set(id){
          this.$router.push({
              path:`/rolelist/right_set/${id}`
          })
      },
      getRole(){
       // 获取角色列表 
         getRoleList({
             pageNum:this.pageNum,
             pageSize:this.pageSize
         }).then(res=>{
             this.loading = false;
             if(res.status == 1) {
                 this.total = res.total;
                 this.data = res.rows;
                 
             }
         })
      },
      getPageNum(e){
        this.pageNum = e;
      },
    
    }
 }
</script>
<style  scoped>
.rolelist {
        width:100%;
        height: 100%;
}
.rolelist h4 {
    line-height: 22px;
    border-left: 5px solid rgb(32, 160, 255);
    font-size:16px;
    color: #666;
    padding-left:  10px;
    font-size:18px;
    margin-bottom:20px;
}

</style>